<!--
 * @Author: fenghaixing
 * @Date: 2022-11-08 15:26:50
 * @LastEditTime: 2022-11-10 09:50:56
 * @LastEditors: fenghaixing
 * @Description: 表格面板样式
-->
<template>
  <div class="panel-item">
    <div class="item-title">
      <span :class="['status', 'status_' + devData.onlineStatus]">{{onlineStatusName}}</span>
      <span class="text">门磁</span>
    </div>
    <div class="item-content">
      <div class="item">
        <span class="item-label">设备名称</span>
        <span class="item-value">{{devData.deviceName || '-'}}</span>
      </div>
      <div class="item">
        <span class="item-label">设备编码</span>
        <span class="item-value">{{devData.devSerialNum || '-'}}</span>
      </div>
      <div class="item">
        <span class="item-label">设备区域</span>
        <span class="item-value">{{devData.regionPathName || '-'}}</span>
      </div>
      <div class="item">
        <span class="item-label">温度值</span>
        <span class="item-value">{{devData.temperature + '℃' }}</span>
      </div>
      <div class="item">
        <span class="item-label">电压值</span>
        <span class="item-value">{{devData.voltage + 'V'}}</span>
      </div>
      <div class="item">
        <span class="item-label">信号强度</span>
        <span class="item-value">{{devData.signalIntensityValue}}</span>
      </div>
      <div class="item">
        <span class="item-label">门磁状态</span>
        <span class="item-value">{{doorStatusName}} {{devData.dataTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PanelItem',
  props: {
    devData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {}
  },
  computed: {
    doorStatusName () {
      return this.devData.doorStatus === 0 ? '关门中' : '开门中'
    },
    onlineStatusName () {
      return this.devData.onlineStatus === 0 ? '离线' : '在线'
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.panel-item{
  width: 100%;
  height: 280px;
  border: 1px solid #eee;
  .item-title{
    height: 55px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    .status{
      display: inline-block;
      height: 36px;
      width: 70px;
      text-align: center;
      line-height: 36px;
      border-radius: 0px 18px 18px 0px;
      background: rgb(106, 210, 106);
      color: white;
      font-size: 15px;
      margin-right: 15px;
    }
    .status_0{
      background: gray;
    }
    .status_1{
      background: rgb(106, 210, 106);
    }
    .text{
      font-weight: 600;
      font-size: 18px;
    }
  }
  .item-content{
    padding: 12px;
    .item{
      width: 100%;
      height: 30px;
      .item-label{
        display: inline-block;
        width: 68px;
        color: rgba($color: #000000, $alpha: 0.4);
      }
      .item-value{
        display: inline-block;
        width: calc(100% - 68px);
      }
    }
  }
}
</style>
